<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>element demo</title>
    <link rel="stylesheet" href="element/index.css">
</head>

<body>
<div id="app" v-cloak>
    <el-container>
        <!-- 引入公共部分 -->
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1">处理中心</el-menu-item>
            <el-submenu index="2">
                <template slot="title">我的工作台</template>
                <el-menu-item index="2-1">选项1</el-menu-item>
                <el-menu-item index="2-2">选项2</el-menu-item>
                <el-menu-item index="2-3">选项3</el-menu-item>
                <el-submenu index="2-4">
                    <template slot="title">选项4</template>
                    <el-menu-item index="2-4-1">选项1</el-menu-item>
                    <el-menu-item index="2-4-2">选项2</el-menu-item>
                    <el-menu-item index="2-4-3">选项3</el-menu-item>
                </el-submenu>
            </el-submenu>
            <el-menu-item index="3">消息中心</el-menu-item>
            <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
        </el-menu>
    </el-container>
    <el-row style="margin-top:10px">
        <el-button @click="showEnable" size="small" type="danger">showEnable</el-button>
        <el-button @click="showDisable" size="small" type="primary">showDisable</el-button>
        <el-button @click="updateEnable" size="small" type="primary">updateEnable</el-button>
        <el-button @click="updateDisable" size="small" type="primary">updateDisable</el-button>
        <el-button @click="getAllStockCodeFromAPI" size="small" type="primary">fromAPI</el-button>
        <el-button @click="updateAllStockLastAndNowPrice" size="small" type="danger">updateAllLastAndNowPrice</el-button>
        <el-button @click="againBeginRemind" size="small" type="danger">againBeginRemind</el-button>
    </el-row>
    <el-row style="margin-top:10px">
        <el-button @click="broadcast" size="small" type="primary">broadcast</el-button>
        <el-link type="primary" href="/pages/websocket.html" target="_blank">websocket</el-link>
    </el-row>

    <div>
        <el-input type="input" placeholder="请输入内容" v-model="url"></el-input>
        <el-button @click="join" size="small" type="primary">连接</el-button>
        <el-button @click="exit" size="small" type="primary">断开</el-button>
    </div>

    <el-input type="textarea" :rows="2" placeholder="请输入消息内容" v-model="messageContent"></el-input>
    <el-button @click="send" size="small" type="primary">发送消息</el-button>
    <el-input type="textarea" :rows="5" placeholder="返回消息" v-model="responseContent"></el-input>

</div>
</body>
<!-- vue需要在引入element-ui之前引入 -->
<script src="./js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="element/index.js"></script>
<script>
    let ws = null;
    new Vue({
        el: '#app',
        data: function () {
            return {
                url: 'ws://127.0.0.1:10086/websocket/message',
                messageContent: '',
                responseContent: '',
                activeIndex: '1',
                activeIndex2: '1'
            };
        },
        created() {
        },
        mounted() {
            this.join()
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            showEnable: function () {
                axios.get('/show/showEnable').then(response => {
                    console.log(response);
                })
            },
            showDisable: function () {
                axios.get('/show/showDisable').then(response => {
                    console.log(response);
                })
            },
            updateEnable: function () {
                axios.get('/show/updateEnable').then(response => {
                    console.log(response);
                })
            },
            updateDisable: function () {
                axios.get('/show/updateDisable').then(response => {
                    console.log(response);
                })
            },
            getAllStockCodeFromAPI: function () {
                axios.get('/show/getAllStockCodeFromAPI').then(response => {
                    console.log(response);
                })
            },
            updateAllStockLastAndNowPrice: function () {
                axios.get('/show/updateAllStockLastAndNowPrice').then(response => {
                    console.log(response);
                })
            },
            againBeginRemind: function () {
                axios.get('/show/againBeginRemind').then(response => {
                    console.log(response);
                })
            },
            //连接
            join: function () {
                let t = this
                ws = new WebSocket(this.url);
                ws.onopen = function (event) {
                    console.log('onopen')
                    t.responseContent = t.responseContent + '已经打开连接!' + '\n'
                }
                ws.onmessage = function (event) {
                    console.log('收到消息!')
                    console.log(event)
                    t.responseContent = t.responseContent + event.data + '\n'
                    t.$notify({
                        title: 'Notice',
                        message: event.data,
                        type: 'info',
                        duration: 0,
                        onClick() {
                            this.close()
                        }
                    });
                }
                ws.onclose = function (event) {
                    t.responseContent = '已经关闭连接!' + '\n'
                    t.$notify({
                        title: 'Notice',
                        message: 'onclose',
                        type: 'info',
                        duration: 0,
                        onClick() {
                            this.close()
                        }
                    });
                }
            },
            //断开
            exit: function () {
                if (ws) {
                    console.log('close')
                    ws.close();
                    ws = null;
                    t.$notify({
                        title: 'Notice',
                        message: 'exit',
                        type: 'info',
                        duration: 0,
                        onClick() {
                            this.close()
                        }
                    });
                }
            },
            //发送消息
            send: function () {
                console.log('send')
                if (ws) {
                    ws.send(this.messageContent);
                } else {
                    alert("未连接到服务器");
                }
            },
            // 广播
            broadcast: function () {
                console.log('broadcast')
                axios.get('/show/broadcastMessage')
                    .then(response => {
                        console.log(response);
                    })
            },
        },
    })
</script>
</html>
